<template>
  <view class="mine-container">
   <view id="main" style="width: 100%;height: 400px;"></view>
	<view>
		<el-table
		    :data="tableData"
		    stripe
		    style="width: 100%"
			:row-class-name="tableRowClassName">
		    <el-table-column
		      prop="time"
		      label="时间"
		      width="100">
		    </el-table-column>
		    <el-table-column
		      prop="saleMoney"
		      label="销售额"
		      width="100">
		    </el-table-column>
		    <el-table-column
		      prop="saleNumber"
		      label="销售单量"
			  width="100">
		    </el-table-column>
			<el-table-column
			  prop="finish"
			  label="完成率"
			  width="100">
			</el-table-column>
			<el-table-column
			  prop="returnMoney"
			  label="回款金额"
			  width="100">
			</el-table-column>
		  </el-table>
	</view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import * as echarts from 'echarts';
  

  
  export default {
	  methods:{
		     tableRowClassName({row, rowIndex}) {
		        if (rowIndex === 1) {
		          return 'warning-row';
		        } else if (rowIndex === 3) {
		          return 'success-row';
		        }
		        return '';
		      }  
	  },
    data() {
      return {
		  tableData: [{
		            date: '2016-05-02',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1518 弄'
		          }, {
		            date: '2016-05-04',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1517 弄'
		          }, {
		            date: '2016-05-01',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1519 弄'
		          }, {
		            date: '2016-05-03',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1516 弄'
		          }]
        }
    },
onLoad() {
	
	uni.request({
		url:'http://localhost:8089/crmdemo/contract/querySalesTrend',
		success: (res) => {
			
			this.tableData = res.data.result;

		}
	});
	
},
mounted() {
	
	
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;
	option = {
	  title: {
	    text: ''
	  },
	  tooltip: {
	    trigger: 'axis'
	  },
	  legend: {
	    data: ['销售额', '回款金额']
	  },
	  grid: {
	    left: '3%',
	    right: '4%',
	    bottom: '3%',
	    containLabel: true
	  },
	  toolbox: {
	    feature: {
	      saveAsImage: {}
	    }
	  },
	  xAxis: {
	    type: 'category',
	    boundaryGap: false,
	    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月','11月', '12月']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      name: '销售额',
	      type: 'line',
	      stack: 'Total',
	      data: [303000, 553741, 303000, 88000, 0,202011, 294082, 300020,180888,0,909000,602000]
	    },
	    {
	      name: '回款金额',
	      type: 'line',
	      stack: 'Total',
	      data: [30300, 29200, 30300, 44000, 0,23000, 294082, 23945,12000,0,30204,602000]
	    }
	  ]
	}	
	option && myChart.setOption(option)
}
   
  }
</script>






<style lang="scss">
	el-table warning-row {
	  background: oldlace;
	}
	  
	el-table success-row {
	  background: #f0f9eb;
	}
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
      padding: 15px 15px 45px 15px;
      background-color: #3c96f3;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }

</style>
